<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="style/main.css" type="text/css" />
	<title>ERTB-8000</title> 
	<!-- <script src="Scripts/jquery-1.7.2.min.js"
		type="text/javascript"></script> -->
		
		<script src="Scripts/jquery1.2.6.js" type="text/javascript"></script>
	<script src="Scripts/ajaxfileupload.js" type="text/javascript"></script>
</head>
<body style="background: #f6f6f6; font-size: 15px;">

	<div
		style="width: 1000px; margin: 0 auto; background: #fff; color: #585858; text-decoration: none; border: 1px solid #e4e4e4; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);">
		<div style="width: 100%;text-align: center;">
			<h1>ERTB-8000</h1>
		</div>

		<div
			style="width: 100%; height: 38px; background: url('style/img/4.png');">
			<ul id="menu">
				<li id="li1" style="background :#8B8989"><a href="#" onclick="showDiv(0)">主页</a>
				</li>
				<li id="li2"><a href="./systemManager2.jsp" >地图和基站管理</a>
				</li>
				<li id="li3"><a href="#" onclick="showDiv(2)">设备升级</a>
				</li>
				<li id="li4"><a href="#" onclick="showDiv(3)">设备校准</a>
				</li>
			</ul>

		</div>
		
		<div style="width: 1000px; margin: 0 auto; height: 600px;"
			id="mainDiv">

			<table id="commPortTable" border="1"
				style="border-collapse: collapse; width: 100%; border: 1px solid #e4e4e4;"
				>
				
			</table>
			<table border="1" id="vedioCommPort" style="border-collapse: collapse; width: 100%; border: 1px solid #e4e4e4;">
				<tr style="border: 1px solid #e4e4e4;">
					<th colspan="6">视频设置</th>
				</tr>
				<tr>
					<td>可用串口：
						<select id="notUsingPort"></select>
						波特率：<input type="text" style="width: 40px" id="bote" />
						<label id="vedioLinkStatus"></label>
						<button onclick="vedioPortLink()">连接</button>
						<button onclick="vedioPortClose()">断开</button>
					</td>
					<td>场点地址：<input type="text" style="width: 40px" id="address" /></td>
					<td>键盘地址：<input type="text" style="width: 40px" id="keyBordAddress" /></td>
					<td>MON编号：<input type="text" style="width: 40px" id="mon" /></td>
					<td>WIN编号：<input type="text" style="width: 40px" id="win" /></td>
					<td><button onclick="updateVedio()">确定</button></td>
				</tr>
			</table>

			<%@include file="systemSetting.jsp"%>

		</div>
 		<%@include file="DeviceConfig.jsp"%>
		<%@include file="uploadeUpgrade.jsp"%>
	</div>

<script>
		var lis = [ "li1", "li2", "li3","li4"  ];
		var divs = [ "mainDiv", "mapAndbaseSatationManager","upgradeDiv", "deviceUpdatediv" ];

		function showDiv(indexe) {

			for ( var i = 0; i < divs.length; i++) {

				if (i == indexe) {
					
					if("mapAndbaseSatationManager"==divs[i]){
						
						
						
					}else{
						$("#" + divs[i]).show();

						$("#" + lis[i]).css({
							background : "#8B8989"
						});
						
					}
					
					
				} else {
					if("mapAndbaseSatationManager"!=divs[i]){
						$("#" + divs[i]).hide();
						$("#" + lis[i]).css({
							background : "url('style/img/4.png')"
						});
					}
						
					
				
				}

			}
		}
		
		getNotUsePorts();
		function getNotUsePorts() {
			$.post("settingAction", {
				"actionType" : "getNotUsingCommPorts"
			}, function(data) {
				var comInfo = "";
				for(var i = 0; i < data.notUse.length; i++){
					var bean = data.notUse[i];
					comInfo = comInfo + "<option>" + bean.portName + "</option>"
				}
				$("#notUsingPort").html(comInfo);
				
				var vedio = data.vedio;
				$("#bote").val(vedio.bote);
				$("#address").val(vedio.address);
				$("#keyBordAddress").val(vedio.keyBordAddress);
				$("#mon").val(vedio.mon);
				$("#win").val(vedio.win);
				if(vedio.portUse == true){
					$("#vedioLinkStatus").text("已连接");
				}else{
					$("#vedioLinkStatus").text("未连接");
				}
			}, "json");
		}
		//连接视频串口
		function vedioPortLink() {
			$.post("settingAction", {
				"actionType" : "vedioPortLink",
				"portName" : $("#notUsingPort").val(),
				"bote" : $("#bote").val()
			}, function(data) {
				if (data.success == false) {
					alert("连接失败");
				} else {
					getNotUsePorts();
					alert("连接成功");
				}
			}, "json");
		}
		function vedioPortClose(){
			$.post("settingAction", {
				"actionType" : "vedioPortClose"
			}, function(data) {
				if (data.success == false) {
					alert("断开失败");
				} else {
					getNotUsePorts();
					alert("断开成功");
				}
			}, "json");
		}
		function updateVedio() {
			$.post("settingAction", {
				"actionType" : "updateVedio",
				"address" : $("#address").val(),
				"keyBordAddress" : $("#keyBordAddress").val(),
				"mon" : $("#mon").val(),
				"win" : $("#win").val()
			}, function(data) {
				if (data.success == false) {
					alert("修改失败");
				} else {
					alert("修改成功");
				}
			}, "json");
		}
		

		//初始化串口信息
		getPorts();

		function getPorts() {
			$.post("settingAction", {
				"actionType" : "getCommPorts"
			}, function(data) {

				
			
				updateCommPortTableView(data);

			}, "json");
		}

		//更新串口列表数据
		function updateCommPortTableView(data) {

			var coms = "<tr class='d' style='border: 1px solid #e4e4e4;' ><th COLSPAN='5'>串口连接</th></tr>";

			if (data.CommPorts.length > 0) {
				for ( var i = 0; i < data.CommPorts.length; i++) {
					var portBean = data.CommPorts[i];
					if (portBean.use == true) {
						if (portBean.state = false) {
							coms += "<tr style='border: 1px solid #e4e4e4;' id='"+portBean.portName+"tr'><td width='50'>"
									+ portBean.portName
									+ "</td><td width='150' style='padding-left: 8px'>连接状态 : 已连接</td>";
							coms += "<td width='150' style='padding-left: 8px'>"
									+ portBean.map_baseSatationNetwork
									+ "</td>";
							coms += "<td width='150' style='padding-left: 8px'>运行状态 : 异常</td>";
							coms += "<td style='text-align: center; width: 50px'><button  onclick='disconnectPort(\""
									+ portBean.portName
									+ "\")'>断开连接</button></td></tr>";
						} else {
							coms += "<tr style='border: 1px solid #e4e4e4;' id='"+portBean.portName+"tr'><td width='50'>"
									+ portBean.portName
									+ "</td><td width='150' style='padding-left: 8px'>连接状态 : 已连接</td>";
							coms += "<td width='150' style='padding-left: 8px'>"
									+ portBean.map_baseSatationNetwork
									+ "</td>";
							coms += "<td width='150' style='padding-left: 8px'>运行状态 : 正常</td>";
							coms += "<td style='text-align: center; width: 50px'><button  onclick='disconnectPort(\""
									+ portBean.portName
									+ "\")'>断开连接</button></td></tr>";
						}

					} else {

						coms += "<tr class='d' style='border: 1px solid #e4e4e4;' id='"+portBean.portName+"tr'><td width='50'>"
								+ portBean.portName
								+ "</td><td width='150' style='padding-left: 8px'>连接状态 : 未连接</td>";

						coms += "<td width='150' style='padding-left: 8px'><select id='"+portBean.portName+"select'>";

						for ( var key in data.baseStationNetwork) {

							var network = data.baseStationNetwork[key];

							for ( var j = 0; j < network.length; j++) {

								coms += "<option value='"+key+"_"+network[j]+"' >地图"
										+ key
										+ "_基站组"
										+ network[j]
										+ "</option>";
							}
						}

						coms += "</select></td>";
						coms += "<td width='150' style='padding-left: 8px'>运行状态 : 未连接</td>";
						coms += "<td style='text-align: center; width: 50px'><button  onclick='portLink(\""
								+ portBean.portName
								+ "\")'>连接串口</button></td></tr>";
					}

				}

			} else {

				coms += "<tr class='d' style='border: 1px solid #e4e4e4;' ><td COLSPAN='3'>没有串口</td></tr>";

			}

			$("#commPortTable").html(coms);

		}

		//连接串口
		function portLink(portName) {

			var map_baseStationNetwork = $("#" + portName + "select").val();

			$.post("settingAction", {
				"actionType" : "portLink",
				"port" : portName,
				"map_baseStationNetwork" : map_baseStationNetwork
			}, function(data) {
				if (data.success == false) {
					alert("连接失败");
				} else {
					getPorts();
					alert(portName + " 连接成功");

				}
			}, "json");

		}

		//断开串口连接
		function disconnectPort(portName) {

			$.post("settingAction", {
				"actionType" : "disconnectPort",
				"port" : portName
			}, function(data) {
				if (data.success == false) {

					alert(" 断开连接失败");

				} else {
					getPorts();

					alert(" 断开连接成功");
				}
			}, "json");

		}
	</script>

</body>
</html>
